<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" href="../css/aui.css" />
	<link rel="stylesheet" href="../css/mui.css" />
	<link rel="stylesheet" href="../css/public-head.css" />
	<link rel="stylesheet" type="text/css" href="../css/Personal.css" />
</head>

<body>
	<div class="main">
		<div class="persona">
			<ul class="aui-list aui-list-in">
				<li class="aui-list-item" tapmode>
					<!--  onclick="openDialog()" -->
					<div class="aui-list-item-inner aui-list-item-arrow" id="personalin_1" onclick="changePortrait()">
						<span>我的头像</span>
						<img src="../image/icon/kehutx@2x.png" id="myImg" />
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner aui-list-item-arrow" id="personalin_2">
						<span>昵称</span>
						<input class="op" name="Name" onblur="changeNickname()" style="position: absolute;right: 5%;text-align: right;border: none;margin-bottom: 0;width: 50%;padding-top: 20px;" maxlength="4" id="nickname" type="text" placeholder="未设置"></input>
					</div>
				</li>
				<!-- <li class="aui-list-item">
					<div class="aui-list-item-inner aui-list-item-arrow">
						<span>性别</span>
						<select class="op" name="sel_sex" style="width: 16%;margin-top:16px;text-align: center;">
							<option value = "男">男</option>
							<option value = "女">女</option>
							</select>
					</div>
				</li> -->
				<!-- <li class="aui-list-item">
					<div class="aui-list-item-inner aui-list-item-arrow">
						<span>年龄</span>
						<select class="op" name="" id="age" style="width: 16%;margin-top:16px;text-align: center;">
							</select>
						<span class="">0岁</span>
					</div>
				</li> -->
			</ul>
		</div>
		<div id="demo"></div>
		<!--弹窗-->
		<div class='pop'>
			<div class='pop-bg'>
				<div class='pop-word' tapmode onclick="closeDialog()">
					<span style="width: 26px;height:26px;float:right;margin:5px 5px 0 0;"><img style="width:100%;height:100%;" src="../image/icon/cdacha.png" alt=""></span>
					<div class="headImg"><img src="../image/icon/htx@2x.png" id="head-pic" alt="" /></div>
					<p class="pop-word-1">更换头像</p>
					<div class="option">
						<div tapmode onclick="getPicture(2,'head-pic')"><span>相册</span></div>
						<div tapmode onclick="getPicture(1,'head-pic')"><span>拍摄</span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/template-web.js"></script>

<script type="text/html" id="age_template">
	{{each list value i}}
	<option value="{{value}}">{{value}}</option>
	{{/each}}
</script>

<script type="text/javascript">

	apiready = function() {
		// 初始化
		init()

		var UserBase = $api.getStorage('UserBase');
		console.log('my:' + JSON.stringify(UserBase));
		$api.byId('myImg').setAttribute('src', UserBase.avatar);
		$api.byId('nickname').setAttribute('value', UserBase.nickname);
	}
	headInner({
		title: "个人信息",
		//headleft
		headl: '<a href="#" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
		//headright
		headr: '<a style="color:white"></a>',
		color: "", //默认是蓝色
		padding: "0px 0px 0px",
	})

	function Refresh() {
		api.execScript({
			// window名字
			name: 'Main_Frame',
			// frame名字
			frameName: 'homepage_2',
			// 执行win下的frame中的方法
			script: 'fnGetInfo();',
		});

		api.execScript({
				// window名字
				name: 'Main_Frame_two',
				// frame名字
				frameName: 'RechargePayment',
				// 执行win下的frame中的方法
				script: 'fnGetLoginData1();',
		});
		api.execScript({
				// window名字
				name: 'Main_Frame',
				// frame名字
				frameName: 'RechargePayment',
				// 执行win下的frame中的方法
				script: 'fnGetLoginData1();',
		});

		api.execScript({
				// window名字
				name: 'Main_Frame_two',
				frameName: 'mine_2',
				// 执行win下的frame中的方法
				script: 'fnGetLoginDatamine();',
		});
	}
	//修改头像
	function fnModifyTheHeadPortrait(individual_sculpture) {
		console.log("修改头像");
		BASE.MYajax({
			'pathName': 'users/changeAvatar',
			'methods': 'post',
			'ajaxData': {
				value: {
					headimg: individual_sculpture
				}
			},
			'method': headportrait
		});
	}

	function headportrait(ret, err) {
		console.log("获取修改头像模板" + JSON.stringify(ret));
		if (ret.code == 200) {
			var html = template('personalin_template1', ret);
			document.getElementById('personalin_1').innerHTML = html;
				// $api.setStorage('UserBase', ret.data);
				// $api.setStorage('userInfo', ret.data);
		} else {
			reToast(ret, err)
		}
	}



	//年龄
	var data = {
		list: ["18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56",
			"57", "58", "59", "60", "61", "62", "63", "64", "65"
		]
	};
	// var html = template('age_template', data);
	// document.getElementById('age').innerHTML = html;

	function setup() {
		api.openWin({
			name: 'set-up',
			url: '../html/set-up.html'
		});
	}
	//弹窗
	var popbg = document.querySelector(".pop-bg");
	var demoword = document.querySelector(".pop-word");

	function openDialog() {
		demoword.style.display = "block";
		popbg.style.display = "block";
	}

	function closeDialog() {
		demoword.style.display = "none";
		popbg.style.display = "none";
	}
	// 更换头像
	function changePortrait() {
		api.actionSheet({
			title: '上传图片',
			cancelTitle: '取消',
			buttons: ['拍照', '从手机相册选择']
		}, function(ret, err) {
			if (ret) {
				// 选择照片
				getPicture(ret.buttonIndex);
			} else {
				alert(JSON.stringify(err));
			}
		});
	}
	// 选择照片
	function getPicture(sourceType, imgid) {
		var img_src = $api.byId('myImg').getAttribute("src")
		if (sourceType == 1) { // 拍照
			api.getPicture({
				sourceType: 'camera',
				encodingType: 'png',
				mediaValue: 'pic',
				allowEdit: false,
				quality: 100,
				saveToPhotoAlbum: true
			}, function(ret, err) {
				if (ret) {
					api.showProgress({
						style: 'default',
						animationType: 'fade',
						text: '图片上传中...',
						modal: false
					});
					$api.byId('myImg').setAttribute('src', ret.data);
					top_img = ret.data;
					console.log(top_img)
				}
				if (ret.data == "") {
					api.toast({
						msg: '您没有选择照片',
						duration: 2000,
						location: 'bottom'
					});
				}
				api.hideProgress() //取消进度框
			})
		} else if (sourceType == 2) { // 从相机中选择
			api.getPicture({
				sourceType: 'library',
				encodingType: 'png',
				mediaValue: 'pic',
				quality: 100,
			}, function(ret, err) {
				if (ret) {
					api.showProgress({
						style: 'default',
						animationType: 'fade',
						text: '图片上传中...',
						modal: true
					});
					$api.byId('myImg').setAttribute('src', ret.data);
					console.log(ret.data)
					fnPostImg(ret.data)
				}else {
					// alert('您没有选择照片。');
					// document.getElementById(imgid).src = "../image/icon/htx@2x.png";
					console.log(img_src);
					document.getElementById(imgid).src = img_src;
					top_img = img_src;
				}
				api.hideProgress() //取消进度框
			});
		}
	}

	function changeNickname() {
		fnModifyNickname()
	}
	//修改昵称
	function fnModifyNickname() {
		var nickname = $api.byId('nickname').value;
		console.log("修改昵称");
		BASE.MYajax({
			'pathName': 'users/changeNickname',
			'methods': 'post',
			'ajaxData': {
				values: {
					'nickname': nickname
				}
			},
			'method': fnGetInitData
		});
	}

	function fnPostImg(top_img) {
		// alert(top_img)
		BASE.MYajax({
			'pathName': 'users/changeAvatar', //请求路径
			'methods': 'POST',
			'ajaxData': {
				files: {
					'headimg': top_img,
				}
			},
			'method': fnGetInitData //调用函数
		});
	}

	function fnGetInitData(ret, err) {
		if(ret.code==200){
			api.toast({
			    msg: ret.message,
			    duration: 2000,
			    location: 'bottom'
			});
			Refresh()
		}else{
			reToast(ret, err)
		}
	}
</script>

</html>
